<template>
  <view class="video-page">
    <!-- 顶部导航栏（视频分类） -->
    <scroll-view class="video-tab" scroll-x="true" show-scrollbar="false">
      <view 
        class="tab-item" 
        v-for="(item, index) in tabList" 
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ item }}
      </view>
    </scroll-view>

    <!-- 视频列表 -->
    <view class="video-list">
      <view class="video-item" v-for="(video, index) in videoList" :key="index" @click="goToVideoDetail(video.id)">
        <!-- 视频封面 + 时长 -->
        <view class="video-cover">
          <image :src="video.coverUrl" mode="widthFix"></image>
          <view class="video-duration">{{ formatDuration(video.duration) }}</view>
        </view>
        <!-- 视频信息 -->
        <view class="video-info">
          <view class="video-title">{{ video.title }}</view>
          <view class="video-meta">
            <view class="play-count">{{ formatPlayCount(video.playCount) }}</view>
            <view class="author">{{ video.author }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 视频分类Tab
const tabList = ref(['推荐', '千里眼', '搞笑', '娱乐', '社会', '音乐', '科技'])
const currentTab = ref(0)
// 视频列表数据（实际项目从接口获取，此处模拟）
const videoList = ref([
  {
    id: 1,
    coverUrl: '/static/video-cover1.jpg', // 需替换为实际图片路径
    title: '600斤的公牛不甘心被杀，宁愿跳进大海之中，结局令人遗憾',
    duration: 95, // 时长（秒）
    playCount: 12500, // 播放量
    author: '自然探索者'
  },
  {
    id: 2,
    coverUrl: '/static/video-cover2.jpg',
    title: '这些箱子里装的中高档卷烟共有1350余条、27万余支',
    duration: 106,
    playCount: 8900,
    author: '法治日报'
  }
])

// 切换分类Tab
const switchTab = (index) => {
  currentTab.value = index
  // 实际项目中：根据Tab切换请求对应分类的视频数据
}

// 格式化时长（秒 → 分:秒）
const formatDuration = (seconds) => {
  const min = Math.floor(seconds / 60).toString().padStart(2, '0')
  const sec = (seconds % 60).toString().padStart(2, '0')
  return `${min}:${sec}`
}

// 格式化播放量（万级显示）
const formatPlayCount = (count) => {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万`
  }
  return count
}

// 跳转视频详情页
const goToVideoDetail = (videoId) => {
  router.push({
    path: '/pages/video/detail',
    query: { videoId } // 传递视频ID
  })
}

// 模拟请求视频数据（实际项目替换为接口请求）
onMounted(() => {
  // 示例：uni.request({ url: 'xxx', success: (res) => { videoList.value = res.data } })
})
</script>

<style scoped>
.video-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部分类Tab */
.video-tab {
  background-color: #fff;
  padding: 15rpx 20rpx;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.tab-item {
  display: inline-block;
  padding: 10rpx 25rpx;
  font-size: 30rpx;
  color: #333;
  margin-right: 10rpx;
}
.tab-item.active {
  color: #d00;
  font-weight: bold;
  border-bottom: 4rpx solid #d00;
}

/* 视频列表 */
.video-list {
  padding: 20rpx;
}
.video-item {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.video-cover {
  position: relative;
}
.video-cover image {
  width: 100%;
  height: 400rpx;
  object-fit: cover;
}
.video-duration {
  position: absolute;
  bottom: 15rpx;
  right: 15rpx;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 24rpx;
  padding: 5rpx 10rpx;
  border-radius: 8rpx;
}
.video-info {
  padding: 20rpx;
}
.video-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-meta {
  font-size: 24rpx;
  color: #999;
  display: flex;
  justify-content: space-between;
}
</style>